In the realm of design systems, the distinction between similar-looking components that serve different functions is crucial for enhancing user experience. Dean Harrison, in his article for UX Collective, highlights the common scenario where designers and engineers may confuse components like badges and pills due to their visual similarities. This confusion can lead to improper usage, complicating the maintenance of a design system. Harrison identifies himself as someone who often points out these discrepancies in his workplace, emphasizing the importance of adhering to the correct component usage. He notes that a frequent complaint in design systems is the misuse of components, which can stem from designers and engineers pushing the boundaries of what a component can do or creating new variants unnecessarily. To address these issues, he suggests implementing a review process involving both designers and engineers before development begins. Additionally, he stresses the need for clear annotations in design files and robust documentation to eliminate ambiguity. While documentation is often seen as a solution, Harrison acknowledges its limitations. Designers may only consult documentation when problems arise, and even then, it can lead to more questions than answers. He uses the badge and pill example to illustrate this point, explaining that badges are used to highlight static metadata, while pills are interactive elements that allow users to modify selections. This distinction raises the question of why similar components are separated rather than combined into one. The rationale lies in maintaining a manageable system and avoiding complexity in usage. Harrison elaborates on the benefits of keeping components distinct, such as simplifying the process of making changes to styling without affecting other components and establishing a visual hierarchy within the user interface. He discusses three commonly confused components: badges and pills, buttons and action buttons, and selects and dropdowns. Each serves a unique purpose, and understanding these differences is essential for effective design. For instance, buttons are prominent elements that facilitate user actions, while action buttons are less prominent and serve specific tasks within workflows. Similarly, selects are used for single-option choices, whereas dropdowns allow for multiple selections. Harrison encourages designers to refer to resources like The Component Gallery, which provides examples and links to various design systems, aiding in the correct application of components. In conclusion, while the article touches on a few key components, Harrison invites further discussion on the challenges faced in component usage, particularly in startups where documentation may be lacking. He emphasizes the importance of clear processes and resources to navigate the complexities of design systems effectively.